<template>
  <view class="love-name">
        <view class="item-view" :style="{ 'background-image': 'url(' + head + ')' }" ></view>
        <view class='item-view' :style="{ 'background-image': 'url(' + bottom + ')' }" ></view>
        <view :class="defStatus === EnumStatus.STATUS ? 'yet-view' :'item-view'" :style="{ 'background-image': 'url(' + input + ')' }" ></view>
  
        <Start  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"  />
        <Result v-else :content="content" v-model:defStatus="defStatus"  />
    </view>

  <Roast />
  <Recommend :top='98' v-if="defStatus === EnumStatus.RESULT"  />
  <ToDY />
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
import Start from "./components/Start.vue";
import Result from "./components/Result.vue";

import Roast from "@/components/Roast/Roast.vue";
import Recommend from "@/components/Recommend/Recommend.vue";
import ToDY from "@/components/ToDY/ToDY.vue";

const env = ref("https://dmn000001-1301065476.cos.ap-guangzhou.myqcloud.com/sas/loveName/")
const defStatus = ref(EnumStatus.STATUS)
const content = ref()
const head = computed(()=>{
    return defStatus.value === EnumStatus.STATUS ? `${env.value}start-head.png`  : `${env.value}result-head.png`
})
const bottom = computed(()=>{
    return defStatus.value === EnumStatus.STATUS ? `${env.value}start-bottom.png`  : `${env.value}result-input.png`
})
const input = computed(()=>{
    return defStatus.value === EnumStatus.STATUS ? `${env.value}start-input.png`  : `${env.value}result-bottom.png`
})
</script>

<style>
page{
    width: 100%;
    height: 100%;
}

</style>

<style lang="scss" scoped>
.love-name{
    width: 100%;
    height: 100%;
    .item-view{
        width: 100%;
        height: 33.33%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .yes-view{
        width: 100%;
        height: 50%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .yet-view{
        width: 100%;
        height: 50%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

</style>
